<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {} }" searchConditionNum="6">
        <gz-text-up v-model:value="searchData['mchNo']" :placeholder="'商户号'" />
        <gz-text-up v-model:value="searchData['mchName']" :placeholder="'商户名称'" />
        <gz-text-up v-model:value="searchData['contactTel']" :placeholder="'手机号'" />
        <!-- <a-form-item label="" class="table-search-item">
          <a-select v-model:value="searchData['level']" placeholder="商户星级">
            <a-select-option value="">
              全部
            </a-select-option>
            <a-select-option value="1">
              1星
            </a-select-option>
            <a-select-option value="2">
              2星
            </a-select-option>
          </a-select>
        </a-form-item> -->
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        :tableExportFunc="tableExportFunc"
        row-key="mchNo"
        @btnLoadClose="btnLoading = false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button type="link" danger @click="delFunc(record.groupMchId)">删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
</template>
<script setup lang="ts">
import fileDownload from 'js-file-download'
import{$exportExcel}from '@/api/components/GzexportExcel/index'
import{$delBusinessMch,$getBusinessMchList}from'@/api/businessCircle/index'

import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import router from '@/router'
import { resolve } from 'path'
const { $infoBox, $access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties

const infoTable = ref()

const props = defineProps(['sqNo'])

let tableColumns = reactive([
  {
    title: '序号', dataIndex: 'index', width: 70,
    customRender: ({ index }: { index: number }) => {
      return `${index + 1}`
    },
  },
  // { key: 'bindAt', title: '添加时间', dataIndex: 'bindAt', width: 160, minWidth: 200, maxWidth: 230 },
  // { key: 'oper', title: '添加人', dataIndex: 'oper', width: 100, minWidth: 200, maxWidth: 120 },
  { key: 'mchName', title: '商户名称', dataIndex: 'mchName', width: 120, minWidth: 100, maxWidth: 150 },
  { key: 'mchNo', title: '商户号', dataIndex: 'mchNo', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'contactTel', title: '联系电话', dataIndex: 'contactTel', width: 140, minWidth: 140, maxWidth: 170 },
  // { key: 'level', title: '商户等级', width: 100, minWidth: 100, maxWidth: 130 },
  // { key: 'orgName', title: '商户归属网点', dataIndex: 'orgName', agentEntCol: true, width: 140, minWidth: 140, maxWidth: 170 },
  // { key: 'ghName', title: '客户经理', dataIndex: 'ghName', width: 100, minWidth: 110, maxWidth: 250 },
  // { key: 'applymentAt', title: '进件时间', dataIndex: 'applymentAt', width: 160, minWidth: 200, maxWidth: 230 },
  { key: 'operation', title: '操作', width: 80, fixed: 'right', align: 'center' }
])

let btnLoading = ref(false)
let searchData = ref({})
function tableExportFunc() {
  let param = Object.assign(searchData.value, { 'pageSize': -1 })
  return $exportExcel('/api/mchInfo/exportExcel', param).then(res => {
    fileDownload(res.data, '商户列表.xlsx')
  }).catch((error) => { console.log(error) })
}

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return new Promise((resolve)=>{
    $getBusinessMchList({ groupId: props.sqNo }).then(res => {
      resolve(res)
    })
  })
}

function searchFunc() { // 点击【查询】按钮点击事件
  infoTable.value.refTable(true)
}
// 删除商户
function delFunc(recordId: any) {
  $infoBox.confirmDanger('确认解绑？', '该操作将删除商户与该商圈的绑定关系', () => {
    $delBusinessMch({ groupMchId: recordId }).then((res: any) => {
      infoTable.value.refTable(true)
      $infoBox.message.success('解绑成功')
    })
  })
}
</script>
